<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <!-- 使用computed 实现 在input中实现数据筛选 -->
    
    <div id="app">
        <input  type="text" v-model.number="age">
        <ul>
            <!-- 在不影响原数据的情况下，对新数据进行遍历 -->
            <li v-for="item in newPerson" :key="item.id">
                {{item.name}}--{{item.age}}
            </li>
        </ul>

    </div>
    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    age:0,
                    person: [
                        { id: "001", name: "lucy", age: 22 },
                        { id: "002", name: "lili", age: 12 },
                        { id: "003", name: "yuehan", age: 31 },
                        { id: "004", name: "liming", age: 18 },
                        { id: "005", name: "xiaowang", age: 4 },
                        { id: "006", name: "zhangsan", age: 19 },
                        { id: "007", name: "wangwu", age: 40 },
                    ],
                    
                };
            },
            // watch和computed都可以实现侦听的功能,
            // watch直接侦听某个值,computed是侦听内部计算需要的属性
            // 如果只读数据的话，可以使用computed
            computed:{
                newPerson(){
                    return this.person.filter((item)=>{
                        return item.age >this.age
                    })
                }
            }

        });
    </script>
</body>

</html>